<template>
    <view class="price" :style="{ color: color }">
        <view v-if="showSymbol" class="int" style="font-size: 34rpx;">¥</view>
        <view class="int">{{ priceParts.intPart }}</view>
        <view class="dot">.</view>
        <view class="dec">{{ priceParts.decimalPart }}</view>
    </view>
</template>

<script>
import { splitYuanToParts } from '@/utils/utils.js';

export default {
    props: {
        value: {
            type: [Number, String],
            required: true
        },
        showSymbol: {
            type: Boolean,
            default: true
        },
        color: {
            type: String,
            default: '#ff0000'
        }
    },
    computed: {
        priceParts() {
            return splitYuanToParts(this.value);
        }
    }
};
</script>

<style scoped>
.price {
    display: flex;
    font-weight: bold;
    align-items: flex-end;
}

.int {
    font-size: 36rpx;
    margin: 0 2rpx;
    line-height: 36rpx;
}

.dot {
    font-size: 30rpx;
    line-height: 30rpx;
    margin-bottom: 2rpx;
}

.dec {
    font-size: 30rpx;
    line-height: 30rpx;
    margin-bottom: 2rpx;
}
</style>